<template>
  <div>
    <el-card>
      <el-row>
        <el-col :span="7" class="top_input">
          <label>订单号：</label>
          <el-input
            v-model="searchModel.orderNumber"
            clearable
            placeholder="请输入订单号"
          >
          </el-input>
        </el-col>
        <el-col :span="7" class="top_input">
          <label>申请单号：</label>
          <el-input
            v-model="searchModel.applicationId"
            clearable
            placeholder="请输入申请单号"
          >
          </el-input>
        </el-col>
      </el-row>

      <div style="margin-left: 5px">
        <el-button type="primary" plain size="small" @click="getOrderList()"
          >搜索</el-button
        >
      </div>
    </el-card>

    <el-card>
      <el-table :data="orderList" style="width: 100%">
        <el-table-column prop="orderNumber" label="订单号" width="220">
        </el-table-column>
        <el-table-column prop="applicationId" label="申请单号" width="200">
        </el-table-column>
        <el-table-column prop="dispatcherId" label="派单员ID" width="200">
        </el-table-column>
        <el-table-column prop="dispatchTime" label="派单时间" width="200">
        </el-table-column>

        <el-table-column prop="fuelCost" label="燃油费用" width="200">
        </el-table-column>

        <el-table-column prop="otherCost" label="其他费用" width="200">
        </el-table-column>

        <el-table-column
          prop="actualStartTime"
          label="实际开始时间"
          width="200"
        >
        </el-table-column>
        <el-table-column prop="actualEndTime" label="实际结束时间" width="200">
        </el-table-column>

        <el-table-column prop="status" label="状态" width="200">
          <template slot-scope="scope">
            <!-- ，in_progress-进行中，completed-已完成，cancelled-已取消 -->
            <el-tag v-if="scope.row.status == 'dispatched'" effect="dark"
              >已派车</el-tag
            >
            <el-tag
              v-if="scope.row.status == 'in_progress'"
              effect="dark"
              type="success"
              >进行中</el-tag
            >
            <el-tag
              v-if="scope.row.status == 'completed'"
              effect="dark"
              type="success"
              >已完成</el-tag
            >
            <el-tag
              v-if="scope.row.status == 'cancelled'"
              effect="dark"
              type="warning"
              >已取消</el-tag
            >
          </template>
        </el-table-column>
        <el-table-column label="操作">
          <template slot-scope="scope">
            <el-button type="text" size="small" @click="handleInfo(scope.row)"
              >查看详情</el-button
            >
            <el-button type="text" size="small" @click="handleUpdate(scope.row)"
              >修改</el-button
            >
          </template>
        </el-table-column>
      </el-table>
    </el-card>

    <el-pagination
      @current-change="handleCurrentChange"
      :current-page="searchModel.pageNo"
      :page-size="searchModel.pageSize"
      layout="total,  prev, pager, next, jumper"
      :total="total"
    >
    </el-pagination>

    <!-- 修改订单对话框 -->
    <el-dialog
      title="修改订单"
      :visible.sync="dialogVisible"
      width="30%"
      :before-close="handleClose"
    >
      <el-form
        ref="orderForm"
        :model="orderForm"
        :rules="rules"
        label-width="80px"
      >
        <el-form-item label="燃油费用" prop="fuelCost">
          <el-input
            v-model.number="orderForm.fuelCost"
            placeholder="请输入燃油费用"
          ></el-input>
        </el-form-item>
        <el-form-item label="其他费用" prop="otherCost">
          <el-input
            v-model.number="orderForm.otherCost"
            placeholder="请输入其他费用"
          ></el-input>
        </el-form-item>

        <el-form-item label="状态" prop="status">
          <el-select v-model="orderForm.status" placeholder="请选择状态">
            <el-option
              v-for="item in statusOption"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            >
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="updateOrder()">确定</el-button>
          <el-button @click="close()">取消</el-button>
        </el-form-item>
      </el-form>
    </el-dialog>

    <!-- 订单详情对话框 -->
    <!-- 订单详情对话框 -->
    <el-dialog
      title="订单详情"
      :visible.sync="detailDialogVisible"
      width="60%"
      :before-close="handleDetailClose"
      custom-class="order-detail-dialog"
    >
      <div class="detail-container" v-if="orderDetail">
        <!-- 基本信息卡片 -->
        <el-card class="detail-card" shadow="never">
          <div slot="header" class="card-header">
            <span class="header-title"
              ><i class="el-icon-document"></i> 基本信息</span
            >
          </div>
          <el-row :gutter="20">
            <el-col :span="12">
              <div class="detail-item">
                <label class="item-label">订单号：</label>
                <span class="item-value">{{
                  orderDetail.orderId || "无"
                }}</span>
              </div>
              <div class="detail-item">
                <label class="item-label">出发地：</label>
                <span class="item-value">{{
                  orderDetail.departureLocation || "无"
                }}</span>
              </div>
              <div class="detail-item">
                <label class="item-label">目的地：</label>
                <span class="item-value">{{
                  orderDetail.destination || "无"
                }}</span>
              </div>
              <div class="detail-item">
                <label class="item-label">乘客人数：</label>
                <span class="item-value"
                  >{{ orderDetail.passengers || "0" }} 人</span
                >
              </div>
            </el-col>
            <el-col :span="12">
              <div class="detail-item">
                <label class="item-label">订单状态：</label>
                <span class="item-value">
                  <el-tag
                    :type="getStatusTagType(orderDetail.status)"
                    effect="light"
                    class="status-tag"
                  >
                    {{ getStatusText(orderDetail.status) }}
                  </el-tag>
                </span>
              </div>
              <div class="detail-item">
                <label class="item-label">开始时间：</label>
                <span class="item-value">{{
                  formatTime(orderDetail.startTime) || "无"
                }}</span>
              </div>
              <div class="detail-item">
                <label class="item-label">结束时间：</label>
                <span class="item-value">{{
                  formatTime(orderDetail.endTime) || "无"
                }}</span>
              </div>
              <div class="detail-item">
                <label class="item-label">座位数：</label>
                <span class="item-value"
                  >{{ orderDetail.seats || "0" }} 座</span
                >
              </div>
            </el-col>
          </el-row>
        </el-card>

        <!-- 车辆信息卡片 -->
        <el-card class="detail-card" shadow="never">
          <div slot="header" class="card-header">
            <span class="header-title"
              ><i class="el-icon-truck"></i> 车辆信息</span
            >
          </div>
          <el-row :gutter="20">
            <el-col :span="12">
              <div class="detail-item">
                <label class="item-label">车牌号：</label>
                <span class="item-value">{{
                  orderDetail.plateNumber || "无"
                }}</span>
              </div>
            </el-col>
            <el-col :span="12">
              <div class="detail-item">
                <label class="item-label">车辆类型：</label>
                <span class="item-value">{{
                  orderDetail.vehicleType || "无"
                }}</span>
              </div>
            </el-col>
          </el-row>
        </el-card>

        <!-- 联系信息卡片 -->
        <el-card class="detail-card" shadow="never">
          <div slot="header" class="card-header">
            <span class="header-title"
              ><i class="el-icon-phone"></i> 联系信息</span
            >
          </div>
          <div class="detail-item">
            <label class="item-label">联系电话：</label>
            <span class="item-value">{{ orderDetail.phone || "无" }}</span>
          </div>
        </el-card>

        <!-- 备注信息卡片 -->
        <el-card class="detail-card" shadow="never" v-if="orderDetail.remarks">
          <div slot="header" class="card-header">
            <span class="header-title"
              ><i class="el-icon-edit"></i> 备注信息</span
            >
          </div>
          <div class="remarks-content">
            {{ orderDetail.remarks }}
          </div>
        </el-card>

        <!-- 图片信息卡片 -->
        <el-card class="detail-card" shadow="never">
          <div slot="header" class="card-header">
            <span class="header-title"
              ><i class="el-icon-picture"></i> 相关图片</span
            >
          </div>
          <div v-if="orderDetail.imgList && orderDetail.imgList.length > 0">
            <el-image
              v-for="(img, index) in orderDetail.imgList"
              :key="index"
              :src="img"
              :preview-src-list="orderDetail.imgList"
              fit="cover"
              class="detail-image"
            >
              <div slot="error" class="image-error">
                <i class="el-icon-picture-outline"></i>
              </div>
            </el-image>
          </div>
          <div v-else class="no-data">
            <i class="el-icon-picture-outline"></i>
            <p>暂无相关图片</p>
          </div>
        </el-card>
      </div>

      <span slot="footer" class="dialog-footer">
        <el-button @click="closeDetail" class="close-btn">关闭</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<style scoped>
.top_input {
  margin: 4px;
}

.row {
  margin: 10px;
}
.detail-container {
  max-height: 70vh;
  overflow-y: auto;
  padding: 5px;
}

.detail-card {
  margin-bottom: 16px;
  border: 1px solid #ebeef5;
  border-radius: 8px;
}

.detail-card:last-child {
  margin-bottom: 0;
}

.card-header {
  display: flex;
  align-items: center;
  padding: 12px 20px;
  background: linear-gradient(135deg, #667eea 0%, #409eff 100%);
  border-radius: 8px 8px 0 0;
}

.header-title {
  color: white;
  font-weight: 600;
  font-size: 16px;
}

.header-title i {
  margin-right: 8px;
}

.detail-item {
  display: flex;
  align-items: center;
  margin: 12px 0;
  padding: 0 20px;
}

.item-label {
  width: 100px;
  font-weight: 600;
  color: #606266;
  flex-shrink: 0;
}

.item-value {
  flex: 1;
  color: #303133;
  word-break: break-all;
}

.status-tag {
  font-weight: 600;
  padding: 4px 8px;
}

.remarks-content {
  padding: 0 20px 12px;
  color: #606266;
  line-height: 1.6;
}

.detail-image {
  width: 120px;
  height: 120px;
  margin: 0 10px 10px 0;
  border-radius: 6px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  transition: all 0.3s ease;
  cursor: pointer;
}

.no-data {
  text-align: center;
  padding: 40px 0;
  color: #909399;
}

.no-data i {
  font-size: 48px;
  margin-bottom: 16px;
  display: block;
}

.no-data p {
  margin: 0;
  font-size: 14px;
}

.close-btn {
  padding: 10px 24px;
  border-radius: 6px;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  border: none;
  color: white;
  font-weight: 600;
}

.close-btn:hover {
  opacity: 0.9;
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(102, 126, 234, 0.4);
}
</style>

<script>
import ordersApi from "@/api/orders";
export default {
  data() {
    return {
      searchModel: {
        pageNo: 1,
        pageSize: 10,
      },
      orderList: [],
      total: 0,

      dialogVisible: false,
      detailDialogVisible: false, // 详情对话框显示状态

      orderForm: {},
      orderDetail: null, // 订单详情数据

      statusOption: [
        { value: "dispatched", label: "已派车" },
        { value: "in_progress", label: "进行中" },
        { value: "completed", label: "已完成" },
        { value: "cancelled", label: "取消" },
      ],

      rules: {
        status: [{ required: true, message: "请选择状态", trigger: "change" }],

        fuelCost: [{ type: "number", message: "必须为数字值" }],
        otherCost: [{ type: "number", message: "必须为数字值" }],
      },

      drawer: false,
    };
  },

  methods: {
    // 获取状态标签类型
    getStatusTagType(status) {
      const typeMap = {
        dispatched: "primary",
        in_progress: "success",
        completed: "success",
        cancelled: "warning",
      };
      return typeMap[status] || "info";
    },

    // 获取状态文本
    getStatusText(status) {
      const textMap = {
        dispatched: "已派车",
        in_progress: "进行中",
        completed: "已完成",
        cancelled: "已取消",
      };
      return textMap[status] || "未知状态";
    },

    // 格式化时间
    formatTime(time) {
      if (!time) return "";
      return new Date(time)
        .toLocaleString("zh-CN", {
          year: "numeric",
          month: "2-digit",
          day: "2-digit",
          hour: "2-digit",
          minute: "2-digit",
        })
        .replace(/\//g, "-");
    },
    handleClose(done) {
      this.$confirm("确认关闭？")
        .then((_) => {
          done();
          this.close();
        })
        .catch((_) => {});
    },

    handleDetailClose(done) {
      this.$confirm("确认关闭？")
        .then((_) => {
          done();
          this.closeDetail();
        })
        .catch((_) => {});
    },

    handleCloseDrawer(done) {
      this.$confirm("确认关闭？")
        .then((_) => {
          done();
          this.Draweclose();
        })
        .catch((_) => {});
    },

    Draweclose() {
      this.orderForm = {};
      this.drawer = false;
    },

    // 查看详情
    handleInfo(row) {
      // 根据接口获取订单详情
      ordersApi
        .getOrderByIdInfo(row.id)
        .then((res) => {
          if (res.code === 20000) {
            this.orderDetail = res.data;
            this.detailDialogVisible = true;
          } else {
            this.$message.error("获取订单详情失败");
          }
        })
        .catch(() => {
          this.$message.error("获取订单详情失败");
        });
    },

    // 关闭详情对话框
    closeDetail() {
      this.orderDetail = null;
      this.detailDialogVisible = false;
    },

    close() {
      this.orderForm = {};
      this.$refs.orderForm.resetFields();
      this.dialogVisible = false;
    },

    handleCurrentChange(pageNo) {
      this.searchModel.pageNo = pageNo;
      this.getOrderList();
    },

    getOrderList() {
      ordersApi.getOrderList(this.searchModel).then((res) => {
        this.orderList = res.data.rows;
        this.total = res.data.total;
      });
    },

    handleUpdate(row) {
      // 回显数据
      ordersApi.getOrderById(row.id).then((res) => {
        this.orderForm = res.data.data;
        this.dialogVisible = true;
      });
    },

    updateOrder() {
      // 表单验证
      this.$refs.orderForm.validate((valid) => {
        if (valid) {
          ordersApi.updateById(this.orderForm).then((res) => {
            this.getOrderList();
            this.close();
          });
        } else {
          return false;
        }
      });
    },
  },

  created() {
    this.getOrderList();
  },
};
</script>
